import React, { Component } from 'react';
import type { Dispatch } from 'umi';
import { connect, Link } from 'umi';
import {
  Avatar,
  Button,
  Col,
  Collapse,
  Form,
  Input,
  message,
  Modal,
  PageHeader,
  Row,
  Select,
  Space,
  Spin,
  Tabs,
  Tag,
  Typography,
} from 'antd';
import { FormInstance } from 'antd/lib/form';
import {
  AuditOutlined,
  CarryOutOutlined,
  DownloadOutlined,
  TeamOutlined,
  UserOutlined,
  UserSwitchOutlined,
} from '@ant-design/icons';
import styles from './index.less';
import 'rc-texty/assets/index.css';
import ScoreListAndAnalysis from './components/ScoreListAndAnalysis';
import OtherScore from './components/OtherScore';
import 'rc-texty/assets/index.css';

const { Search } = Input;
const { Option } = Select;
const { Paragraph } = Typography;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { TextArea } = Input;

export type APP = {
  courseId: string;
  courseName: string;
  courseType: string;
  courseAttr: string;
  courseTag: string;
  credit: string;
  schoolId: string;
};

export type Props = {
  dispatch: Dispatch;
  studentReport?: any;
  sendReportMailLoading?: boolean;
};

class StudentAnalysisMentor extends Component<Props> {
  state = {
    TabsVisible: '1', //右侧抽屉是否可见
    userId: undefined, //班级或者宿舍主题 传输id 给学生报表
    FuzzyValue: [], //模糊查询的下拉框 班级
    DormitoryFuzzyValue: [], //模糊查询的下拉框  宿舍
    mailVisible: false,
    picPath: undefined, //头像地址
    DormName: undefined, //班级主题 传输宿舍名字 给宿舍主题
    classid: undefined, //
  };

  formRef = React.createRef<FormInstance>();
  GPATrend = React.createRef<Function>();
  fiveStarBase64 = React.createRef<Function>();

  componentDidMount = () => {
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'user/getcurrentuserinfo',
        payload: {
          callback: (value: any) => {
            this.setCurrentUserInfo(JSON.parse(value));
          },
        },
      });
    }
  };
  //获取 用户头像
  setCurrentUserInfo = (value: any) => {
    this.setState({
      picPath: value.picPath,
    });
  };

  //各个主题间切换
  TabsOnChange = (value: any) => {
    this.setState({
      TabsVisible: value,
    });
  };
  render() {
    const { studentReport, sendReportMailLoading } = this.props;
    const {
      TabsVisible,
      userId,
      FuzzyValue,
      DormitoryFuzzyValue,
      mailVisible,
      picPath,
      DormName,
      classid,
    } = this.state;
    const roleTag = localStorage.getItem('roles');
    const content = (
      <>
        <Paragraph>
          本模块将学生成绩分为两部分，分别是学生的课堂成绩和其他成绩
        </Paragraph>
        <Paragraph>
          班导师可以看到其管理的班级的所有学生的成绩数据，通过横向、纵向对比的方式直观体现每个班级的学习情况
        </Paragraph>
        <Paragraph>
          班导师可以根据学生的成绩分析图，以掌握所管理的班级目前的成绩状况，并通过适当的方式对培养策略进行调整，以达到全面培养学生的目的
        </Paragraph>
      </>
    );
    const Content = ({ children, extraContent }: any) => (
      <Row>
        <div style={{ flex: 1 }}>{children}</div>
        <div className="image">{extraContent}</div>
      </Row>
    );
    return (
      <div style={{ padding: 30, background: ' #ececec', width: '100%' }}>
        {studentReport?.picPath ? (
          <img src={studentReport?.picPath} hidden id="ljh111" />
        ) : null}
        <div style={{ marginBottom: 30, backgroundColor: 'white' }}>
          <PageHeader
            title="学生成绩分析"
            subTitle="包含学生成绩汇总及分析"
            tags={<Tag color="blue">运行中</Tag>}
            extra={<Space></Space>}
            avatar={{ src: require('@/assets/picture/报表.png') }}
          >
            <Content>{content}</Content>
            <Tabs
              type="card"
              activeKey={TabsVisible}
              onChange={this.TabsOnChange}
              size="large"
            >
              {/* {roleTag === '2' ? null : ( */}
              <>
                <TabPane
                  tab={
                    <span className={styles.tabStyle}>
                      <AuditOutlined />
                      学生成绩汇总及分析
                    </span>
                  }
                  key="1"
                />
                <TabPane
                  tab={
                    <span className={styles.tabStyle}>
                      <AuditOutlined />
                      学生其他成绩汇总
                    </span>
                  }
                  key="2"
                />
              </>
              {/* )} */}
            </Tabs>
            {TabsVisible === '1' ? <ScoreListAndAnalysis /> : null}
            {TabsVisible === '2' ? <OtherScore /> : null}
          </PageHeader>
        </div>
      </div>
    );
  }
}

export default connect(({ user }: any) => ({
  user,
}))(StudentAnalysisMentor);
